<template>
  <page-header-wrapper :title="false">
    <a-card class="card">
      <s-table
        ref="table"
        bordered
        :row-key="(record) => record.id"
        :columns="columns"
        :data="data"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <template slot="name" slot-scope="text">
          <a-popover trigger="hover">
            <template slot="content">
              <p>{{text}}</p>
            </template>
            <ellipsis :length="10">{{text}}</ellipsis>
          </a-popover>
        </template>
        <template slot="lastly" slot-scope="text">
          <a-statistic-countdown valueStyle="color: red;font-size:14px" :value="text" format="D 天 H 时 m 分 s 秒" />
        </template>
        <template slot="status" slot-scope="text">
          <a-tag v-if="text === '非正常'" color="red">{{text}}</a-tag>
          <a-tag v-else color="blue">{{text}}</a-tag>
        </template>
        <template slot="history" slot-scope="text">
          <a-rate style="color: #1890ff;font-size: 14px" :default-value="text" disabled count="10"/>
        </template>
        <template slot="action">
          <a-button type="primary" size="small" @click="submit">缴费</a-button>
        </template>
      </s-table>
    </a-card>
    <a-modal
      centered
      title="缴费年限选择"
      v-model="Visible"
    >
      <a-form-model>
        <a-form-model-item label="缴费年限">
          <a-rate style="color: #1890ff;font-size: 14px" count="10"/>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import { STable, Ellipsis } from '@/components'

  export default {
    name: 'AnnualFee',
    components: { STable, Ellipsis },
    data () {
      return {
        Visible: false,
        selectedRowKeys: [],
        columns: [
          {
            title: '专利名称',
            dataIndex: 'name',
            scopedSlots: { customRender: 'name' }
          },
          {
            title: '专利注册号',
            dataIndex: 'register'
          },
          {
            title: '专利类型',
            dataIndex: 'category'
          },
          {
            title: '发证时间',
            dataIndex: 'create_at'
          },
          {
            title: '客户电话',
            dataIndex: 'phone'
          },
          {
            title: '最近需要交费时间',
            dataIndex: 'lastly',
            scopedSlots: { customRender: 'lastly' }
          },
          {
            title: '状态',
            dataIndex: 'status',
            scopedSlots: { customRender: 'status' }
          },
          {
            title: '交费历史',
            dataIndex: 'history',
            scopedSlots: { customRender: 'history' }
          },
          {
            title: '上传人',
            dataIndex: 'uploader'
          },
          {
            title: '代理公司',
            dataIndex: 'agency'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        data: () => {
          return new Promise(resolve => {
            resolve({
              data: [
                {
                  id: '1',
                  name: '一种关于植物无土栽培的新方法',
                  register: '01234156789',
                  category: '发明专利',
                  create_at: '2021-12-24 23:12:00',
                  phone: '15252233789',
                  lastly: Date.now() + 1000 * 60 * 60 * 24 * 45,
                  status: '正常',
                  history: '4',
                  agency: '知识产权公司',
                  uploader: '顾问0'
                },
                {
                  id: '2',
                  name: '一种关于植物无土栽培的新方法',
                  register: '01234156789',
                  category: '发明专利',
                  create_at: '2021-12-24 23:12:00',
                  phone: '15252233789',
                  lastly: Date.now() + 1000 * 60 * 60 * 24 * 50,
                  status: '非正常',
                  history: '5',
                  agency: '知识产权公司',
                  uploader: '顾问0'
                }
              ]
            })
          })
        }
      }
    },
    methods: {
      onSelectChange (selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      submit () {
        this.Visible = true
      }
    }
  }
</script>
